<style type="text/css">
    *{margin: 0px; padding: 0px; list-style: none; text-decoration: none; color: #333;}
    .slide-item  p{position: absolute;left: 0px; top: 0px; color: #fff; }
    .arrow{position: absolute;width: 30px; height: 80px;top: 50%; margin-top: -40px; background: rgba(0,0,0,0%); }
    .prev{left: 30px;}
    .next{right: 30px;}
    .pagination{position: absolute;width: 100%;  text-align: center; bottom: 30px;}
    .pagination ul{display: inline-block;}
    .pagination li{ width: 10px; height: 10px; line-height: 10px; border-radius: 50%;background: #fff; float: left; margin-left: 10px;}
    .pagination li.active-point{background: #f10;}
</style>       
<div class="slide" id="slide">
    <ul class="slide-group">
        <li class="slide-item red"><a href="">
            <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3881048221,3833583369&fm=26&gp=0.jpg"
            <p>这是第一张</p>
            </a></li>
        <li class="slide-item blue"><a href="">
            <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1486271666,307393547&fm=26&gp=0.jpg" alt="">
            <p>这是第二张</p>
            </a></li>
        <li class="slide-item pink"><a href="">
            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3731741439,4057676812&fm=26&gp=0.jpg" alt="">
            <p>这是第三张</p>
            </a></li>
        <li class="slide-item orange"><a href="">
            <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2350817201,1137116540&fm=26&gp=0.jpg" alt="">
            <p>这是第四张</p>
            </a></li>
    </ul>
    <div class="arrow prev" id="btn-prev"></div>
    <div class="arrow next" id="btn-next"></div>
    <div class="pagination" id="pagination"></div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    function Slide(options) {
        this.wrapper = $(options.elm);
        this.slideGroup = this.wrapper.find('ul');
        this.slideItems = this.wrapper.find('li');
        this.pagination = $(options.pagination);
        this.width = options.width;
        this.height = options.height;
        this.length = this.slideItems.length;
        this.idx = 0;
        this.lock = false;
        this.timer = null;
        this.duration = options.duration || 3000;
        this.initLeft = 0;
        this.init(options)//初始化轮播图
    }
    Slide.prototype.init = function(options) {
        //初始化轮播图视口宽度，容器宽度，项目宽度。
        var that = this;
        if(options.loop) this.clone(options.loop);
        if(options.pagination) this.creatElm(options.pagination);
        this.wrapper.css({width:options.width || 600,height:options.height || 300,overflow:'hidden',position:'relative'});
        this.slideGroup.css({width:this.slideGroup.find('li').length * this.width,height:this.height,position:'absolute',left:-this.initLeft});
        this.slideGroup.find('li').css({width:this.width,height:this.height,float:'left',position:'relative'})
        this.slideGroup.find('li img').css({width:'100%',height:'100%' ,backgroundSize:'cover'});
        that.activeElm(that.idx);
        this.bindEvent(options)
        this.timer = setInterval(function(){
            that.toNext();
        },this.duration);
    }
    Slide.prototype.clone = function(mode){
        if(mode !== '' && mode === true){ 
            this.slideItems.eq(0).clone().appendTo(this.slideGroup)
            this.slideItems.eq(this.length - 1).clone().prependTo(this.slideGroup);
            this.initLeft = this.width;
        }else{
            this.slideItems.eq(0).clone().appendTo(this.slideGroup)
        }
    }
    Slide.prototype.creatElm = function(target){
        var ul = document.createElement('ul');
        $(ul).appendTo($(target));
        for(var i = 0; i < this.slideItems.length; i ++){
            var li = document.createElement('li');
            if(i === 0 ) $(li).addClass('active-point');
            $(li).appendTo($(ul));
        }

    }

    Slide.prototype.toPrev = function(){
        if(this.lock) return false;
        this.idx--;
        this.move();
    }

    Slide.prototype.toNext = function(){ 
        if(this.lock) return false;
        this.idx++;
        this.move();
    }

    Slide.prototype.move = function(){
        var that = this;
        this.lock = true
        // console.log('锁了',this.lock);
        // console.log('执行第'+ this.idx +'次');

        this.slideGroup.animate({left:-(this.idx * this.width + this.initLeft),top:0},'swing',function(){
            that.lock = false;
            that.activeElm(that.idx);
            // console.log('解开了',that.lock);
            if(that.idx == that.slideItems.length){
                that.idx = 0;
                that.activeElm(that.idx);
                that.slideGroup.css({left:-that.initLeft});
            }
            if(that.idx == -1){
                that.idx = that.slideItems.length-1;
                that.slideGroup.css({left:-that.initLeft*(that.slideItems.length)});
            }
        })
    }
    Slide.prototype.activeElm = function(curIdx){
        this.pagination.find('li').removeClass('active-point').eq(curIdx).addClass('active-point');
        this.slideItems.removeClass('active-item').eq(curIdx).addClass('active-item')
    }
    Slide.prototype.bindEvent = function(options){
        var that = this;
        if(options.arrow.prev){
            $(options.arrow.prev).click(function(){
                clearInterval(that.timer);
                that.timer = null;
                that.toPrev();
                that.timer = setInterval(function(){
                    that.toNext();
                },that.duration)
            })
        }
        if(options.arrow.next){
            $(options.arrow.next).click(function(){
                clearInterval(that.timer);
                that.timer = null;
                that.toNext();
                that.timer = setInterval(function(){
                    that.toNext();
                },that.duration)
            })
        }
        if(options.pagination){
            $(options.pagination).on('click','li',function(e){
                console.log(that.idx, $(e.target).index());
                var tarIdx = $(e.target).index()
                that.idx = tarIdx;
                clearInterval(that.timer);
                that.timer = null;
                that.move();
                that.timer = setInterval(function(){
                    that.toNext();
                },that.duration)
            })
        }
        this.wrapper.on('mouseover',function(){
            clearInterval(that.timer);
            that.timer = null;
        })
        this.wrapper.on('mouseleave',function(){
            that.timer = setInterval(function(){
                that.toNext();
            },that.duration)
        })
    }
    let slide = new Slide({
        elm:'#slide',
        width:820,
        height:300,
        arrow:{
            prev:'#btn-prev',
            next:'#btn-next'
        },
        pagination:'#pagination',
        loop:true,//启用无缝轮播,
        actived:function(){},
        befored:function(){}
        // direction:'right'//轮播方向
        // fullPage:true//是否启用全屏轮播

    })
</script>